<template>
	<view>
		<view class="LoginPage">

			<view class="logo">
				<image class="img" src="/static/images/index/logo.png" mode=""></image>
				<view>{{$t('login.greeting-l1')}}</view>
				OTC
			</view>
			<view class="form">
				<view class="type">
					<view v-for="(item,index) in list" :key="index" :class="current==index?'active':''"
						@click="sectionChange(index)">
						<span :class="'index'+index">{{item}}</span>
					</view>
				</view>
				<form v-if="current==0">
					<view class="uni-form-item uni-column" style="position: relative">
						<view class="title">{{$t('signin.input-mobile')}}<!-- 手机号 --></view>
						<!-- 请输入手机号 -->
						<input class="uni-input" type="number" v-model="formData.phone"
							:placeholder="$t('signin.input-mobile-placeholder')" maxlength="11" />
						<view class="code" @click="handleCode">
							{{ counting ? $t('but.againGetCode', {count}) : $t('but.getCode') }}
							<!-- // 
							 {{ counting ? `${count}秒后重新获取` : "获取验证码" }}-->
						</view>
					</view>
				</form>
				<form v-else>
					<view class="uni-form-item uni-column" style="position: relative">
						<view class="title">{{$t('signin.input-email')}}<!-- 邮箱 --></view>
						<!-- 请输入邮箱 -->
						<input class="uni-input" type="email" v-model="formData.email"
							:placeholder="$t('signin.input-email-placeholder')" />
						<view class="code" @click="handleCodeEmail">
							{{ counting ? $t('but.againGetCode', {count}) : $t('but.getCode') }}
							<!-- {{ counting ? `${count}秒后重新获取` : "获取验证码" }} -->
						</view>
					</view>
				</form>

				<view class="uni-form-item uni-column">
					<view class="title">{{$t('signin.input-code')}}<!-- 验证码 --></view>
					<!-- 请输入验证码 -->
					<input class="uni-input" name="account" v-model="formData.vercode"
						:placeholder="$t('signin.input-code-placeholder')" maxlength="6" />
				</view>
				<view class="uni-form-item uni-column" style="position: relative">
					<view class="title">{{$t('signin.input-password')}}<!-- 登录密码 --></view>
					<input class="uni-input uni-inputpass" type="password" name="password" v-model="formData.password"
						maxlength="20" :placeholder="$t('signin.input-password-placeholder')" />
					<!-- 请输入登录密码 -->
				</view>
				<view class="uni-form-item uni-column" style="position: relative">
					<view class="title">昵称</view>
					<input class="uni-input uni-inputpass" name="nickname" v-model="formData.nickname" maxlength="20"
						placeholder="请输入昵称" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">{{$t('signin.input-invite')}}<!-- 邀请码 --></view>
					<input class="uni-input" name="account" v-model="parent_user_id"
						:placeholder="$t('signin.input-invite-placeholder')" maxlength="6" />
					<!-- 请输入邀请码 -->
				</view>
				<view class="uni-btn">
					<button @click="formSubmit" v-if="current==0" class="uni-btn-v">{{$t('ok')}}<!-- 确认 --></button>
					<button @click="submitEmail" v-else class="uni-btn-v">{{$t('ok')}}<!-- 确认 --></button>
				</view>
				<!-- 同意服务条款 -->
				<checkbox-group class="auth-clause" @change="CheckboxChange">
					<checkbox class="orange" :class="checked ? 'checked' : ''" :checked="checked ? true : false"
						value="agree" />
					<view>
						{{$t('agree')}}
						<!-- 同意 -->
						<text @tap="
				  onDetails(
				    $store.state.common.appConfig.user_agreement,
				    `《${$t('yiliandaoshangchengyonghuxieyi')}》`,
				    checked_01
				  )
				">
							《{{$t('yiliandaoshangchengyonghuxieyi')}}》
							<!-- 《易联道商城用户服务协议》 -->
						</text>
					</view>
				</checkbox-group>
				<view class="goregist">
					<text @tap="auth">{{$t('signin.but.login')}}<!-- 已有账号,去登录 --></text>
				</view>
			</view>
		</view>
		<wanl-agree ref="wanl_agree" @agree="onAgree"></wanl-agree>
	</view>
</template>
<script>
	import graceChecker from "@/common/graceChecker"; //来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
	export default {
		data() {
			return {
				submitDisabled: true,
				title: "表单验证",
				pageroute: "",
				mobile: "",

				checked_01: false,
				checked_02: false,
				count: 60,
				counting: false,
				formData: {
					phone: "",
					vercode: "",
					email: "",
					password: "",
					nickname: ""
				},
				imgUrl: "",
				parent_user_id: "",

				list: [this.$t('signin.type-mobile'), this.$t('signin.type-email')],
				// list: ['手机号注册', '邮箱注册'],
				current: 0,
			};
		},
		onLoad(options) {
			this.pageroute = options.url;
			if (options && options.parent_user_id) {
				this.parent_user_id = options.parent_user_id
			}
			if (options.mobile) {
				this.mobile = options.mobile;
				this.submitDisabled = false;
			}
		},

		computed: {
			checked: function() {
				if (this.checked_01 && this.checked_02) {
					uni.setStorageSync("auth_agree", 1);
					return true;
				}
				return false;
			},
			getSubmitDisabled: function() {
				if (!this.mobile) return true;
				if (!this.checked) return true;
				return false;
			},
		},
		mounted() {
			// setTimeout(() => {
			//   const auth_agree = uni.getStorageSync("auth_agree") || 0;
			//   if (!auth_agree) {
			//     if (this.$store.state.common.appConfig.user_agreement) {
			//       this.onDetails(
			//         this.$store.state.common.appConfig.user_agreement,
			//         "用户协议",
			//         this.checked_01
			//       );
			//     } else {
			//       setTimeout(() => {
			//         this.onDetails(
			//           this.$store.state.common.appConfig.user_agreement,
			//           "用户协议",
			//           this.checked_01
			//         );
			//       }, 2000);
			//     }
			//   }
			// }, 1000);
		},
		methods: {
			// 发送邮箱动态码
			handleCodeEmail() {
				if (this.counting) return;
				var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
				if (!reg.test(this.formData.email)) {
					uni.showToast({
						title: this.$t('signin.toast.input.error.email'), //"请输入正确的邮箱格式",
						icon: "none",
					});
					return;
				}

				this.getCaptchaEmail();
			},
			// 获取验证码的接口
			getCaptchaEmail() {
				uni.request({
					url: "/ems/send",
					method: "POST",
					data: {
						event: "register",
						email: this.formData.email,
					},
					success: (res) => {
						this.$wanlshop.msg(this.$t('signin.toast.success.getCode')); //"验证码发送成功"
						this.counting = true;
						const timer = setInterval(() => {
							this.count--;
							if (this.count <= 0) {
								clearInterval(timer);
								this.counting = false;
								this.count = 60; // 重置倒计时时长
							}
						}, 1000);
					},
					// 1.1.8升级
					complete: (res) => {
						if (res.data.code == 4) {
							this.$refs.wanlCaptcha
								.init({
									event: "register",
									email: this.formData.email
								})
								.then(() => {
									// 验证通过回调
									this.$wanlshop.msg(this.$t(
										'signin.toast.success.getCode')); //"验证码发送成功"
									this.counting = true;
									const timer = setInterval(() => {
										this.count--;
										if (this.count <= 0) {
											clearInterval(timer);
											this.counting = false;
											this.count = 60; // 重置倒计时时长
										}
									}, 1000);
								})
								.catch(() => {
									uni.navigateBack({
										delta: 1
									});
								});
						}
					},
				});
			},
			// 发送手机动态码
			handleCode() {
				if (this.counting) return;
				var reg = /^1[3456789]\d{9}$/;
				if (!reg.test(this.formData.phone)) {
					uni.showToast({
						title: this.$t('signin.toast.input.error.mobile'), //"请输入正确的手机格式",
						icon: "none",
					});
					return;
				}

				this.getCaptcha();
			},
			// 获取验证码的接口
			getCaptcha() {
				uni.request({
					url: "/sms/send",
					method: "POST",
					data: {
						event: "register",
						mobile: this.formData.phone,
					},
					success: (res) => {
						this.$wanlshop.msg(this.$t('signin.toast.success.getCode')); //"验证码发送成功"
						// this.$wanlshop.msg("验证码发送成功");
						this.counting = true;
						const timer = setInterval(() => {
							this.count--;
							if (this.count <= 0) {
								clearInterval(timer);
								this.counting = false;
								this.count = 60; // 重置倒计时时长
							}
						}, 1000);
					},
					// 1.1.8升级
					complete: (res) => {
						if (res.data.code == 4) {
							this.$refs.wanlCaptcha
								.init({
									event: "register",
									mobile: this.formData.phone
								})
								.then(() => {
									// 验证通过回调
									// this.$wanlshop.msg("验证码发送成功");
									this.$wanlshop.msg(this.$t(
										'signin.toast.success.getCode')); //"验证码发送成功"
									this.counting = true;
									const timer = setInterval(() => {
										this.count--;
										if (this.count <= 0) {
											clearInterval(timer);
											this.counting = false;
											this.count = 60; // 重置倒计时时长
										}
									}, 1000);
								})
								.catch(() => {
									uni.navigateBack({
										delta: 1
									});
								});
						}
					},
				});
			},

			CheckboxChange(e) {
				if (e.detail.value.length) {
					this.onDetails(this.$store.state.common.appConfig.user_agreement, '《易联道商城用户服务协议》', this.checked_01)
					this.checked_01 = true;
					this.checked_02 = true;
				} else {
					this.checked_01 = false;
					this.checked_02 = false;
				}
			},
			onKeyInput: function(e) {
				this.submitDisabled = false;
			},

			//邮箱注册
			submitEmail: function(e) {
				if (!this.checked) {
					this.$wanlshop.msg(this.$t('toast.agree-user-agreement')) //"请先同意用户协议");
					return;
				}
				var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
				if (!reg.test(this.formData.email)) {
					uni.showToast({
						title: this.$t('signin.toast.input.error.email'), //"请输入正确的邮箱格式",
						icon: "none",
					});
					return;
				}
				if (this.formData.password == '') {
					uni.showToast({
						title: this.$t('signin.toast.input.error.password'), //"请输入密码",
						icon: "none",
					});
					return;
				}
				if (this.formData.nickname == '') {
					uni.showToast({
						title: "请输入昵称", //"",
						icon: "none",
					});
					return;
				}
				if (this.parent_user_id == '') {
					uni.showToast({
						title: this.$t('signin.toast.input.error.password'), //"请输邀请码",
						icon: "none",
					});
					return;
				}
				uni.request({
					url: "/wanlshop/user/emailRegister",
					method: "POST",
					data: {
						email: this.formData.email,
						password: this.formData.password,
						captcha: this.formData.vercode,
						nickname: this.formData.nickname,
						parent_user_id: this.parent_user_id,
						image: this.imgUrl,
					},
					// 1.1.8 升级
					complete: (res) => {
						if (res.res.code == 1) {
							uni.showModal({
								title: '温馨提示',
								content: '是否下载APP',
								confirmText: '下载',
								success: (res) => {
									if (res.confirm) {
										this.$wanlshop.to(`/pages/downApp`);
									} else {
										this.$wanlshop.to(`/pages/user/auth/auth`,
											"slide-in-bottom", 200);
									}
								}
							});

						} else {

						}
					},
				});
				// } else {
				//   this.$wanlshop.msg(graceChecker.error);
				// }
			},
			//手机号注册
			formSubmit: function(e) {
				if (!this.checked) {
					this.$wanlshop.msg(this.$t('toast.agree-user-agreement')) //"请先同意用户协议");
					return;
				}
				var reg = /^1[3456789]\d{9}$/;
				if (!reg.test(this.formData.phone)) {
					uni.showToast({
						title: this.$t('signin.toast.input.error.mobile'), //"请输入正确的手机格式",
						icon: "none",
					});
					return;
				}
				if (this.formData.password == '') {
					uni.showToast({
						title: this.$t('signin.toast.input.error.password'), //"请输入密码",
						icon: "none",
					});
					return;
				}
				if (this.formData.nickname == '') {
					uni.showToast({
						title: "请输入昵称", //"",
						icon: "none",
					});
					return;
				}
				if (this.parent_user_id == '') {
					uni.showToast({
						title: this.$t('signin.toast.input.error.password'), //"请输邀请码",
						icon: "none",
					});
					return;
				}
				uni.request({
					url: "/wanlshop/user/register",
					method: "POST",
					data: {
						mobile: this.formData.phone,
						password: this.formData.password,
						captcha: this.formData.vercode,
						nickname: this.formData.nickname,
						parent_user_id: this.parent_user_id,
						image: this.imgUrl,
					},
					// 1.1.8 升级
					complete: (res) => {
						if (res.res.code == 1) {
							uni.showModal({
								title: this.$t('signin.modal.title'), //'温馨提示',
								content: this.$t('signin.modal.content'), //'是否下载APP',
								confirmText: this.$t('signin.modal.confirmText'), //'下载',
								success: (res) => {
									if (res.confirm) {
										this.$wanlshop.to(`/pages/downApp`);
									} else {
										this.$wanlshop.to(`/pages/user/auth/auth`,
											"slide-in-bottom", 200);
									}
								}
							});

						} else {

						}
					},
				});
				// } else {
				//   this.$wanlshop.msg(graceChecker.error);
				// }
			},
			sectionChange(index) {
				this.current = index;
				this.formData.phone = ''
				this.formData.email = ''
				this.formData.password = ''
				this.formData.vercode = ''
				this.formData.nickname = ''
				this.imgUrl = ''
			},
			auth() {
				this.$wanlshop.to(`auth?url=${this.pageroute}`);
			},
			handleDown() {
				this.$wanlshop.to(`/pages/downApp`);
			},
			help() {
				this.$wanlshop.to(`/pages/user/help?url=${this.pageroute}`);
			},
			onDetails(id, title, checked) {
				this.$refs.wanl_agree.show(id, title, checked);
			},
			onAgree(id) {
				if (id) {
					this.imgUrl = id;
					this.checked_01 = true;
					this.checked_02 = true;
				}
				// if (id == this.$store.state.common.appConfig.user_agreement) {
				//   this.checked_01 = true;
				//   if (!this.checked_02) {
				//     console.log(this.$store.state.common.appConfig.privacy_protection);
				//     this.onDetails(
				//       this.$store.state.common.appConfig.privacy_protection,
				//       "隐私保护",
				//       this.checked_02
				//     );
				//   }
				// }
				// if (id == this.$store.state.common.appConfig.privacy_protection) {
				//   this.checked_02 = true;
				// }
			},
		},
	};
</script>
<style>
	page {
		min-height: 100vh;
		background: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	@import url("auth.css");

	.LoginPage {
		width: 100%;
		height: 100vh;
		// box-sizing: border-box;
		background-image: url("/static/images/index/bg.png");
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: 100% 242rpx;
		padding-top: 40rpx;

		.down {
			color: #666666;
			font-size: 28rpx;
			position: absolute;
			top: 0;
			right: 20rpx;
		}

		.logo {
			// width: 162rpx;
			height: 162rpx;
			margin: 0 auto;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			text-align: center;

			.img {
				width: 152rpx;
				height: 152rpx;
				margin-bottom: 36rpx;
			}
		}

		.form {
			padding: 0 24rpx;
			margin-top: 160rpx;
			clear: both;

			.uni-input {
				height: 96rpx;
				line-height: 96rpx;
				background: #f8f8f8;
				padding: 0 30rpx;
				margin-top: 20rpx;
				border-radius: 16rpx;
			}

			.type {
				display: flex;
				margin-bottom: 40rpx;

				.index1 {
					margin-left: 30rpx;
				}

				.active {
					font-weight: bold;
					position: relative;
				}

				.active::after {
					content: '';
					width: 60rpx;
					height: 8rpx;
					background: #333333;
					position: absolute;
					top: 44rpx;
					left: 50%;
					margin-left: -30rpx;
					border-radius: 30rpx;
				}
			}
		}

		.uni-form-item {
			margin-top: 20rpx;

			.code {
				font-size: 28rpx;
				color: #fc5351;
				position: absolute;
				right: 30rpx;
				top: 85rpx;
			}

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}

			.eye {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right: 30rpx;
				top: 86rpx;
			}
		}

		.uni-btn-v {
			width: 702rpx;
			height: 96rpx;
			background: #eb5641;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-top: 40rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			line-height: 96rpx;
		}

		.goregist {
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			text-align: center;
			margin-top: 82rpx;
		}
	}
</style>